<template>
	<view class="crowd-and-theme-popup">
		<!-- 适用人群（单选） -->
		<view class="section">
			<view class="section-title">适用人群</view>
			<view class="options">
				<view v-for="(item, idx) in suitable" :key="idx" class="option-item"
					:class="{ active: selected.suitable === item }" @click="selectSuitable(item)">
					{{ item }}
				</view>
			</view>
		</view>

		<!-- 受众年龄（双滑块范围选择） -->
		<view class="section">
			<view class="section-title">受众年龄</view>
			<view style="width: 300px;">
				<CustomRangeSlider
						:value="selected.ageRange"
						:min="3"
						:max="18"
						:step="1"
						@input="handleAgeChange"
					/>
			</view>
		</view>

		<!-- 游学主题（分组 + 横向滑动） -->
		<view class="section">
			<view class="section-title">游学主题（主题标签库）</view>
			<view class="tag-groups">
				<view v-for="(group, gIndex) in tags" :key="gIndex" class="tag-group">
					<view class="tag-group-title">{{ group.name }}</view>
					<scroll-view class="tag-scroll" scroll-x="true" show-scrollbar="false">
						<view class="tag-list">
							<view v-for="(tag, tIndex) in group.tag" :key="tIndex" class="option-item tag"
								:class="{ active: selected.tags.includes(tag) }" @click="toggleTag(tag)">
								{{ tag }}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</view>

		<!-- 确认按钮 -->
		<view class="confirm-btn-container">
			<button class="confirm-btn" @click="handleConfirm">确认</button>
		</view>
	</view>
</template>

<script>
	import CustomRangeSlider from '@/components/CustomRangeSlider.vue';

	export default {
		name: 'CrowdAndThemePopup',
		components: {
			CustomRangeSlider
		},
		data() {
			return {
				suitable: ['仅少儿/学生', '亲子/家长陪同'],
				tags: [{
						name: '亲近自然',
						tag: ['游山玩水', '美景写生', '徒步溯溪']
					},
					{
						name: '户外活动',
						tag: ['捕捞采摘', '自然科普', '生存训练', '运动训练']
					},
					{
						name: '历史人文',
						tag: ['非遗民俗', '考古发现', '历史文化']
					},
					{
						name: '科学探索',
						tag: ['天文科学', '航空相关', '其他科学']
					}
				],
				selected: {
					suitable: '',
					tags: [],
					ageRange: [3, 18] 	
				},
				
			};
		},
		methods: {
			selectSuitable(item) {
				this.selected.suitable = item;
			},

			toggleTag(tag) {
				const index = this.selected.tags.indexOf(tag);
				if (index > -1) {
					this.selected.tags.splice(index, 1);
				} else {
					this.selected.tags.push(tag);
				}
			},

			handleAgeChange(newRange) {
				this.selected.ageRange = newRange;
			},

			handleConfirm() {
				this.$emit('confirm', this.selected);
			}
		}
	};
</script>

<style scoped lang="scss">
	.crowd-and-theme-popup {
		padding: 40rpx;
		background-color: #fff;
	}

	.section {
		margin-bottom: 40rpx;
	}

	.section-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 20rpx;
		padding-left: 10rpx;
		border-left: 4rpx solid #ff6700;
	}

	/* 适用人群选项 */
	.options {
		display: flex;
		flex-wrap: wrap;
		gap: 20rpx;
	}

	.option-item {
		padding: 12rpx 24rpx;
		background-color: #f5f5f5;
		border-radius: 8rpx;
		font-size: 26rpx;
		color: #666;
		transition: all 0.2s ease;
		border: 1px solid #eee;
	}

	.option-item.active {
		background-color: #fbd8bc;
		color: #e65c00;
		border-color: #fbd8bc;
	}

	/* 游学主题分组 */
	.tag-groups {
		display: flex;
		flex-direction: column;
		gap: 30rpx;
	}

	.tag-group-title {
		font-size: 26rpx;
		font-weight: bold;
		color: #555;
		margin-bottom: 12rpx;
	}

	.tag-scroll {
		width: 100%;
		white-space: nowrap;
		overflow-x: auto;
		-webkit-overflow-scrolling: touch;
	}

	.tag-list {
		display: inline-flex;
		align-items: center;
		gap: 16rpx;
		padding: 10rpx 0;
	}

	.tag {
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
		font-size: 24rpx;
		min-width: fit-content;
		white-space: nowrap;
		background-color: #f5f5f5;
		color: #666;
	}

	.tag.active {
		background-color: #fbd8bc;
		color: #e65c00;
		border-color: #fbd8bc;
	}

	/* 确认按钮 */
	.confirm-btn-container {
		display: flex;
		justify-content: center;
		margin-top: 40rpx;
	}

	.confirm-btn {
		width: 80%;
		height: 80rpx;
		background-color: #ff6700;
		color: white;
		border: none;
		border-radius: 40rpx;
		font-size: 32rpx;
		font-weight: bold;
	}

	.confirm-btn:active {
		background-color: #e05a00;
	}
</style>